<template>
  <div class="container">
    <div class="text-24 mb-10px">发布</div>
    <el-form
      :disabled="disabledForm"
      :inline="disabledForm"
      class="form"
      :class="{ 'disabled-form': disabledForm }"
    >
      <div class="border-b-#0B0B0B border-b-solid pb-10px">
        <span class="text-21px">基础信息</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="客户姓名">
            <el-input v-model="formData.cust_name" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="模式" prop="business_model">
            <el-select v-model="formData.business_model" style="width: 100%">
              <el-option
                v-for="(item, index) in BUSINESS_MODEL"
                :key="index"
                :value="item.val"
                :label="item.remark"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="拍摄类型">
            <el-select v-model="formData.type" style="width: 100%">
              <el-option
                v-for="(item, index) in TYPE"
                :key="index"
                :value="item.val"
                :label="item.remark"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="精修数量" prop="meal_pic_num">
            <el-input-number
              v-model="formData.meal_pic_num"
              placeholder="套内包含精修数"
              :controls="false"
              style="width: 100%; text-align: left"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="border-b-#0B0B0B border-b-solid pb-10px">
        <span class="text-21px">选片信息</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="精修单价" prop="meal_unit_price">
            <el-input-number
              v-model="formData.meal_unit_price"
              placeholder="请输入"
              :controls="false"
              style="width: 100%; text-align: left"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="底片" prop="is_sent_origin_photo">
            <el-select
              v-model="formData.is_sent_origin_photo"
              style="width: 100%"
            >
              <el-option :value="0" label="不送" />
              <el-option :value="1" label="赠送" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="佣金" prop="commission_rate">
            <el-input-number
              v-model="formData.commission_rate"
              placeholder="请输入"
              :controls="false"
              style="width: 100%; text-align: left"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="允许自主折扣" prop="is_allow_discount">
            <el-select v-model="formData.is_allow_discount" style="width: 100%">
              <el-option :value="0" label="否" />
              <el-option :value="1" label="是" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="满5单价" prop="touch_discount_five">
            <el-input-number
              placeholder="请输入"
              :controls="false"
              style="width: 100%; text-align: left"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="满10单价" prop="touch_discount_ten">
            <el-input-number
              v-model="formData.touch_discount_ten"
              placeholder="请输入"
              :controls="false"
              style="width: 100%; text-align: left"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="满20单价" prop="touch_discount_twenty">
            <el-input-number
              v-model="formData.touch_discount_twenty"
              placeholder="请输入"
              :controls="false"
              style="width: 100%; text-align: left"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="底片单价">
            <el-input-number
              placeholder="请输入"
              :controls="false"
              style="width: 100%; text-align: left"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="底片打包价" prop="packet_amt">
            <el-input-number
              v-model="formData.packet_amt"
              placeholder="请输入"
              :controls="false"
              style="width: 100%; text-align: left"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <!-- <el-form-item label="工期" prop="DURATION">
            <el-select v-model="formData.duration_end_time" style="width: 100%">
              <el-option
                v-for="(item, index) in DURATION"
                :key="index"
                :value="item.val"
                :label="item.remark"
              />
            </el-select>
          </el-form-item> -->
        </el-col>
      </el-row>
      <div class="border-b-#0B0B0B border-b-solid pb-10px">
        <span class="text-21px">修图信息</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="客户姓名">
            <el-input placeholder="系统匹配" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="底片数量" prop="picture_num">
            <el-input-number
              v-model="formData.picture_num"
              placeholder="自动识别"
              :controls="false"
              style="width: 100%; text-align: left"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="返修次数">
            <el-select v-model="formData.repair_times" style="width: 100%">
              <el-option
                v-for="(item, index) in REPAIR_TIMES"
                :key="index"
                :value="item.val"
                :label="item.remark"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="回件时间" prop="duration">
            <el-select v-model="formData.duration" style="width: 100%">
              <el-option
                v-for="(item, index) in DURATION"
                :key="index"
                :value="item.val"
                :label="item.remark"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="修图方式">
            <el-select v-model="formData.category" style="width: 100%">
              <el-option
                v-for="(item, index) in CATEGORY"
                :key="index"
                :value="item.val"
                :label="item.remark"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="建议修图费">
            <el-input-number
              placeholder="请输入"
              :controls="false"
              style="width: 100%; text-align: left"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="自定义修图费" prop="mch_amt">
            <el-input-number
              v-model="formData.mch_amt"
              placeholder="不填则跟随系统建议"
              :controls="false"
              style="width: 100%; text-align: left"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="修图备注">
            <el-input placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <template v-if="pageStatus === 'add'">
        <div class="border-b-#0B0B0B border-b-solid pb-10px">
          <span class="text-21px">创建相册</span>
        </div>
        <el-row :gutter="20">
          <el-col>
            <el-form-item>
              <el-button-group>
                <el-button>原档（0）</el-button>
                <el-button>底图（0）</el-button>
              </el-button-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-input
                v-model="formData.photo_plate_url"
                placeholder="输入百度网盘链接地址"
              />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item>
              <el-button class="bg-#6F22FF border-transparent">
                <span class="text-white">导入照片</span>
              </el-button>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item>
              <el-button
                class="mr-40px bg-#191919 border-transparent"
                @click="handleConfirm"
              >
                同意并发布
              </el-button>
              <el-checkbox v-model="formData.save_as_model">
                保存此配置为模版
              </el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </el-form>
    <template v-if="disabledForm">
      <div class="border-b-#0B0B0B border-b-solid pb-10px">
        <span class="text-21px">相册</span>
      </div>
      <el-row class="py-20px">
        <el-button
          class="order-btn"
          :class="{ active: imgType === 'origin' }"
          @click="imgType = 'origin'"
        >
          原档（{{ getPcOrderImages.origin.count }}）
        </el-button>
        <!-- <el-button class="order-btn" :class="{ active: imgType === 'origin' }">
          底册（10）
        </el-button> -->
        <el-button
          class="order-btn"
          :class="{ active: imgType === 'select' }"
          @click="imgType = 'select'"
        >
          精修（{{ getPcOrderImages.origin.count }}）
        </el-button>
        <el-button
          class="order-btn"
          :class="{ active: imgType === 'retouch' }"
          @click="imgType = 'retouch'"
        >
          返修（{{ getPcOrderImages.origin.count }}）
        </el-button>
      </el-row>
      <el-row>
        <el-image
          v-for="(img, index) in getPcOrderImages[imgType].list"
          :key="index"
          :src="img.image_url"
          class="float-left img-item"
        />
      </el-row>
    </template>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgType: 'origin',
      disabledForm: false,
      formData: {
        /** 客户姓名 */
        cust_name: '',
        /** 模式 */
        business_model: '',
        /** 拍摄类型 */
        type: '',
        /** 精修数量 */
        meal_pic_num: '',
        /** 精修单价 */
        meal_unit_price: '',
        /** 是否送底片 */
        is_sent_origin_photo: 0,
        /** 佣金 */
        commission_rate: '',
        is_allow_discount: '',
        /** 满5优惠 */
        touch_discount_five: '',
        /** 满10优惠 */
        touch_discount_ten: '',
        touch_discount_twenty: '',
        packet_amt: '',
        origin_file_url: '',
        category: '',
        mch_amt: '',
        repair_times: '',
        picture_num: '',
        save_as_model: true,
        photo_plate_url: ''
      },
      BUSINESS_MODEL: [],
      CATEGORY: [],
      DURATION: [],
      QUALITY: [],
      REPAIR_TIMES: [],
      TYPE: [],
      pageStatus: 'add',
      getPcOrderImages: {
        origin: {
          count: 0,
          list: []
        },
        retouch: {
          count: 0,
          list: []
        },
        select: {
          count: 0,
          list: []
        }
      }
    }
  },

  mounted () {
    this.$axios.get('/TaskOrder/getAttr').then(({ data }) => {
      // console.log(res, "ressss");
      const {
        BUSINESS_MODEL,
        CATEGORY,
        DURATION,
        QUALITY,
        REPAIR_TIMES,
        TYPE
      } = data
      this.BUSINESS_MODEL = BUSINESS_MODEL
      this.CATEGORY = CATEGORY
      this.DURATION = DURATION
      this.QUALITY = QUALITY
      this.REPAIR_TIMES = REPAIR_TIMES
      this.TYPE = TYPE
    })
    if (this.$route.query.id) {
      this.$axios
        .post('/TaskOrder/getTaskOrderDetail', { task_order_id: 40 })
        .then(({ data }) => {
          // console.log("xxxxxx");
          Object.assign(this.formData, data)
          this.pageStatus = 'view'
          this.disabledForm = true
        })
      this.$axios
        .post('/TaskOrder/getPcOrderImages', { task_order_id: 40 })
        .then(({ data }) => {
          this.getPcOrderImages = data
        })
    }
  },
  methods: {
    handleConfirm () {
      this.$axios
        .post('/TaskOrder/add', {
          ...this.formData,
          save_as_model: this.formData.save_as_model ? 1 : 0
        })
        .then(() => {
          console.log('vvv')
        })
    }
  }
}
</script>

<style lang="scss">
.container {
  padding: 20px 40px;
  box-sizing: border-box;
  color: #595a60;
  /* margin: 0 auto; */
  /* min-height: 100vh; */
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  /* text-align: center; */
  .el-input-number .el-input__inner {
    text-align: left;
  }
  .form {
    .el-input__inner {
      background: #3c3c3c;
      border-color: transparent;
      &::-webkit-input-placeholder {
        color: #616161;
      }
    }
  }
  .el-form.disabled-form {
    .el-col-6 {
      .el-form-item {
        display: flex;
        justify-content: space-between;
        .el-input__inner {
          text-align: right;
        }
      }
      .el-input.is-disabled .el-input__inner::placeholder {
        display: none !important;
      }
      .el-input.is-disabled .el-input__icon {
        display: none;
      }
      .el-input.is-disabled .el-input__inner {
        background-color: transparent;
        border-color: transparent;
        color: rgb(63, 63, 63);
      }
    }
    .el-col-12 {
      .el-form-item {
        display: block;
        .el-form-item__content {
          display: block;
        }
      }
    }
  }
  .order-btn {
    background: #191919;
    border-color: #191919;
    &.active {
      background: transparent;
      border-color: transparent;
      color: #979797;
    }
  }
}
</style>
<style lang="scss" scoped>
.img-item {
  width: 176px;
  height: 165px;
  margin-right: 16px;
}
</style>
